<template>
  <ToolbarItemContainer
    ref="container"
    :iconFile="Icon"
    title="常用回复"
    :needBottomPopup="true"
    :iconWidth="isUniFrameWork ? '26px' : '20px'"
    :iconHeight="isUniFrameWork ? '26px' : '20px'"
    @onDialogShow="onDialogShow"
    @onDialogClose="onDialogClose"
  >
    <div :class="['words', !isPC && 'words-h5']">
      <div :class="['words-header', !isPC && 'words-h5-header']">
        <span :class="['words-header-title', !isPC && 'words-h5-header-title']">
          {{ TUITranslateService.t('Words.常用语-快捷回复工具') }}
        </span>
        <span
          v-if="!isPC"
          :class="['words-header-close', !isPC && 'words-h5-header-close']"
          @click="closeDialog"
        >
          关闭
        </span>
      </div>
      <ul :class="['words-list', !isPC && 'words-h5-list']">
        <li
          v-for="(item, index) in wordsList"
          :key="index"
          :class="['words-list-item', !isPC && 'words-h5-list-item']"
          @click="selectWord(item)"
        >
          {{ item.content }}
        </li>
      </ul>
    </div>
  </ToolbarItemContainer>
</template>
<script setup lang="ts">
import {
  TUITranslateService,
  TUIStore,
  StoreName,
  IConversationModel,
  SendMessageParams,
  TUIChatService,
} from '@tencentcloud/chat-uikit-engine'

import { ref, onMounted } from '@/TUIKit/adapter-vue'
import ToolbarItemContainer from '@/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/index.vue'
import { isEnabledMessageReadReceiptGlobal } from '@/TUIKit/components/TUIChat/utils/utils'
import { isPC, isUniFrameWork } from '@/TUIKit/utils/env'
import Icon from '@/TUIWidget/static/icon/message.png'
// import { wordsList } from '@/TUIKit/components/TUIChat/utils/wordsList'
// DC:
import {
  getDoctorCommonRepliesPage,
  createDoctorCommonReplies,
  getDoctorCommonReplies,
  updateDoctorCommonReplies,
  deleteDoctorCommonReplies,
} from '@/api/commonTools'

const emits = defineEmits(['onDialogPopupShowOrHide'])
const currentConversation = ref<IConversationModel>()
const container = ref()
const wordsList = ref([])

TUIStore.watch(StoreName.CONV, {
  currentConversation: (conversation: IConversationModel) => {
    currentConversation.value = conversation
  },
})

const selectWord = (item: any) => {
  const options = {
    to:
      currentConversation?.value?.groupProfile?.groupID ||
      currentConversation?.value?.userProfile?.userID,
    conversationType: currentConversation?.value?.type,
    payload: {
      text: item.content,
    },
    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
  } as SendMessageParams
  TUIChatService.sendTextMessage(options)
  // close dialog after submit evaluate
  container?.value?.toggleDialogDisplay(false)
}

const closeDialog = () => {
  container?.value?.toggleDialogDisplay(false)
}

const onDialogShow = () => {
  emits('onDialogPopupShowOrHide', true)
}

const onDialogClose = () => {
  emits('onDialogPopupShowOrHide', false)
}

onMounted(async () => {
  wordsList.value = (await getDoctorCommonRepliesPage()).data.list
})
</script>
<style scoped lang="scss" src="./style/index.scss"></style>
